<template>
	<!-- 促销项目详情-提交订单 -->
	<view class="container">
		<!-- 用户信息部分 -->
		<view class="section">

			<view class="row">
				<text class="label">用户</text>
				<text class="value">蒙娜丽莎</text>
			</view>
			<view class="row">
				<text class="label">手机号</text>
				<text class="value">188****5505</text>
			</view>
			<view class="row">
				<text class="label">有效期</text>
				<text class="value" style="color: #C19C55 ;">永久</text>
			</view>
		</view>

		<!-- 预约服务部分 -->
		<view class="section">
			<view class="header">预约服务</view>
			<view class="card">
				<view class="card-image" style="background: linear-gradient( 136deg, #F7E89B 0%, #E0C36E 100%);
border-radius: 14rpx;
">
					<image style="margin: 0 auto;width: 60px;height: 60px;" src="/static/images_y/矩形 + 矩形备份 7 蒙版.png"
						mode="widthFix"></image>
				</view>

				<view class="card-content">
					<view class="card-title">银卡会员</view>
					<view class="card-desc">储值金额：1000元</view>
					<view class="card-price">
						<text class="current-price">¥990</text>
						<text class="original-price">¥2000</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单金额部分 -->
		<view class="section" style="border: none;">
			<view class="row_none">
				<text class="label">订单金额</text>
				<text class="value highlight">¥990</text>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="footer">
			<u-button  type="warning" size="large" @click="pay">立即支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			pay() {
				// 处理支付逻辑
				console.log("支付");
			}
		}
	};
</script>

<style scoped>
	.container {

		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.section {
		margin-bottom: 40rpx;
		background-color: #fff;
		padding: 27rpx;
		border-radius: 16rpx;
	}

	.header {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.row_none {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;

	}

	.label {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.value {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #29292B;
		line-height: 32rpx;
		text-align: right;
		font-style: normal;
	}

	.value.highlight {
		color: #dda43a;
		font-weight: bold;
	}

	.card {
		display: flex;
		padding: 20rpx;
		background-color: #f7f7f7;
		border-radius: 16rpx;
		border: 2rpx solid #ddd;
	}

	.card-image {
		width: 172rpx;
		height: 172rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.card-content {
		margin-left: 30rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.card-title {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #202022;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
	}

	.card-desc {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 16rpx;
	}

	.card-price {
		display: flex;
		align-items: baseline;
	}

	.current-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #dda43a;
	}

	.original-price {
		font-size: 24rpx;
		text-decoration: line-through;
		color: #888;
		margin-left: 20rpx;
	}


</style>